import React from 'react'
import { Swiper, SwiperSlide } from 'swiper/react';
import { Autoplay, Pagination } from 'swiper';
import 'swiper/css';
import { Wrapper } from './style'

const Banners: React.FC = () => {

    return (
        <Wrapper>
            <Swiper
                modules={[Autoplay, Pagination]}
                spaceBetween={15}
                slidesPerView={1}
                autoplay={{ disableOnInteraction: false }}
                pagination={{
                    bulletClass: 'swiper-pagination-bullet',
                    bulletActiveClass: 'swiper-pagination-bullet-active',
                    clickable: true,
                    type: 'bullets'
                }}
                loop
            >
                <SwiperSlide>
                    <img  className='swiper-container'
                        width="100%" src="https://gw.alicdn.com/imgextra/i2/O1CN01AldACD1uGAjDo0tcp_!!6000000006009-0-tps-1035-219.jpg_790x10000Q75.jpg"/>
                </SwiperSlide>
                <SwiperSlide>
                    <img className='swiper-container'
                        width="100%" src="https://gw.alicdn.com/imgextra/i2/O1CN01XNAS7D1TVkZjtAhVB_!!6000000002388-0-tps-1035-219.jpg_790x10000Q75.jpg_.webp" />
                </SwiperSlide>
                <SwiperSlide>
                    <img className='swiper-container'
                        width="100%" src="https://gw.alicdn.com/imgextra/i3/O1CN01JG9cOO1cA4MrE9Jah_!!6000000003559-0-tps-1035-219.jpg_790x10000Q75.jpg" />
                </SwiperSlide>
                <SwiperSlide>
                    <img className='swiper-container'
                     width="100%" src="https://gw.alicdn.com/imgextra/i3/O1CN01TYZKJL1l0kr350TKs_!!6000000004757-0-tps-1035-219.jpg_790x10000Q75.jpg" />
                </SwiperSlide>
                <SwiperSlide>
                    <img className='swiper-container'
                     width="100%" src="https://gw.alicdn.com/imgextra/i2/O1CN01LE4ayU1zj5oavj8AL_!!6000000006749-0-tps-1035-219.jpg_790x10000Q75.jpg" />
                </SwiperSlide>
            </Swiper>
        </Wrapper>
    )
}

export default Banners












































// import React, { useEffect } from 'react'
// import { BannersWrapper } from './style'
// import Swiper from 'swiper'

// const  Banners:React.FC<{}> = () => {
//     let swiper: null = null;
//     useEffect(() => {
//         // swiper 不能多次实例化
//         if (swiper) {
//             return
//         }
//         new Swiper('.btn-banners', {
//             loop: true,
//             autoplay: {
//                 delay: 3000
//             },
//             pagination: {
//                 el: '.swiper-pagination'
//             }
//         })
//     }, [])
//     return (
//     <BannersWrapper>
//         <div className="btn-banners swiper-container">
//             <div className="swiper-wrapper">
//                 <div className="swiper-slide">
//                     <p>
//                         <img width="100%" src="https://gw.alicdn.com/imgextra/i2/O1CN01XNAS7D1TVkZjtAhVB_!!6000000002388-0-tps-1035-219.jpg_790x10000Q75.jpg_.webp" />
//                     </p>
//                 </div>
//                 <div className="swiper-slide">
//                     <p>
//                         <img width="100%" src="https://gw.alicdn.com/imgextra/i1/O1CN01ozUAsV29wVZjfubvh_!!6000000008132-0-tps-1035-219.jpg_790x10000Q75.jpg_.webp"/>
//                     </p>
//                 </div>
//                 <div className="swiper-slide">
//                     <p>
//                         <img width="100%" src="https://gw.alicdn.com/imgextra/i3/O1CN01TYZKJL1l0kr350TKs_!!6000000004757-0-tps-1035-219.jpg_790x10000Q75.jpg_.webp" />
//                     </p>
//                 </div>
//                 <div className="swiper-slide">
//                     <p>
//                         <img width="100%" src="https://gw.alicdn.com/imgextra/i3/O1CN01JG9cOO1cA4MrE9Jah_!!6000000003559-0-tps-1035-219.jpg_790x10000Q75.jpg_.webp" />
//                     </p>
//                 </div>
//                 <div className="swiper-slide">
//                     <p>
//                         <img width="100%" src="https://gw.alicdn.com/imgextra/i2/O1CN01LE4ayU1zj5oavj8AL_!!6000000006749-0-tps-1035-219.jpg_790x10000Q75.jpg_.webp" />
//                     </p>
//                 </div>
//                 <div className="swiper-slide">
//                     <p>
//                         <img width="100%" src="https://gw.alicdn.com/imgextra/i4/O1CN01b5fajt1ByuiDxThrd_!!6000000000015-0-tps-1035-219.jpg_790x10000Q75.jpg_.webp" />
//                     </p>
//                 </div>
//             </div>
//             <div className="swiper-pagination"></div>
//         </div>
//     </BannersWrapper>
//     )
// }
// export default Banners